<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('日志列表')"/>
</head>
<body>
<div class="layuimini-container">

    <div class="layui-card">
        <div class="layui-card-body">
            <form id="formId" class="layui-form layui-form-pane">
                <div class="layui-form-item">

                    <div class="layui-inline">

                        <label class="layui-form-label">操作人</label>
                        <div class="layui-input-inline">
                            <input type="text" name="operateName" placeholder="请输入操作人"
                                   class="layui-input"  lay-required/>
                        </div>

                    </div>

                    <div class="layui-inline">

                        <label class="layui-form-label">模块</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" placeholder="请输入模块"
                                   class="layui-input"  lay-required/>
                        </div>

                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">是否成功</label>
                        <div class="layui-input-block">
                            <select name="success" dict-code="sys_status">
                                <option value="">所有</option>
                            </select>
                        </div>
                    </div>

                    <button class="layui-btn layui-btn-md" lay-submit lay-filter="log-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-md layui-btn-primary" id="formreset">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </form>
            <table id="log-table" lay-filter="log-table"></table>

        </div>
    </div>
</div>
</body>

<script id="log-status" type="text/html">
    {{#if (d.success == true) { }}
    <span style="color: green">成功</span>
    {{# }else if(d.success == false){ }}
    <span style="color: red">失败</span>
    {{# } }}
</script>

<script id="log-bar" type="text/html">
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="details">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
</script>

<th:block th:include="include :: footer"/>
<script>
    let table;
    layui.use(['table', 'form', 'jquery', 'element', 'dictionary'], function () {
        table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dictionary = layui.dictionary;

        let prefix = pName + "/system/log/";

        let cols = [
            [
                {title: '模块', field: 'title', align: 'center'},
                {title: '请求方式', field: 'requestMethod', align: 'center'},
                {title: '接口', field: 'method', align: 'center'},
                {title: '浏览器', field: 'browser', align: 'center'},
                {title: '操作地址', field: 'operateAddress', align: 'center'},
                {title: '操作系统', field: 'systemOs', align: 'center'},
                {title: '访问时间', field: 'createTime', align: 'center'},
                {title: '操作人', field: 'operateName', align: 'center'},
                {title: '访问状态', templet: '#log-status', align: 'center'},
                {title: '操作', templet: '#log-bar', align: 'center', width: 120}
            ]
        ]

        table.render({
            elem: '#log-table',
            url: prefix + 'data',
            page: true,
            escape: true,
            cols: cols,
            skin: 'line',
            toolbar: false
            ,height: 'full-100'
        });


        form.on('submit(log-query)', function (data) {
            table.reload('log-table', {where: data.field})
            return false;
        });

        table.on('tool(log-table)', function (obj) {
            if (obj.event === 'details') {
                window.info(obj);
            }
        });


        window.info = function (obj) {
            let layerIndex = layer.open({
                type: 1,
                title: '详细信息',
                shade: 0,
                area: ['99%', '99%'],
                content: '<pre class="json-item string-box">' + jsonFormat(obj.data) + "</pre>"

            });
            $(window).on("resize", function () {
                layer.full(layerIndex);
            });
            return false;
        }
    })

    function jsonFormat(jsonTemp) {
        let json = ''
        try {
            // stringify 时需指定缩进否则不会显示换行。为了防止传入的string没有指定 在此统一执行一遍
            if (typeof jsonTemp != 'string') {
                json = JSON.stringify(jsonTemp, undefined, 2);
            } else {
                json = JSON.stringify(JSON.parse(jsonTemp), undefined, 2)
            }
            let jsonObj = JSON.parse(json);
            if (typeof jsonObj === 'object') {
                this.isString = false
                json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
                    let cls = 'number';
                    if (/^"/.test(match)) {
                        if (/:$/.test(match)) {
                            cls = 'key';
                        } else {
                            cls = 'string';
                        }
                    } else if (/true|false/.test(match)) {
                        cls = 'boolean';
                    } else if (/null/.test(match)) {
                        cls = 'null';
                    }
                    return '<span class="' + cls + '">' + match + '</span>';
                });
            } else {
                this.isString = true
                return jsonTemp
            }
        } catch (e) {
            this.isString = true
            return jsonTemp
        }
    }
</script>
<style lang="scss">
    .json-item {
        width: 100%;
        height: 100%;
    .string-box {
         height: auto;
         line-height: 20px;
         overflow: hidden;
         word-break: break-all;
     }
    .number {
        color: #2FA0ED;
    }
    .string {
        color: #F16222;
    }
    .boolean {
        color: #00C099;
    }
    .null {
        color: #CC33CC;
    }
    .key {
        color: #424456;
    }
    }
</style>
</html>